<page-header></page-header>

<mat-card class="p-0">
  <mat-tab-group>
    <mat-tab label="Material">
      <div fxLayout="row wrap">
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Typography</h3>
            <mat-list-item><code>.mat-display-4</code></mat-list-item>
            <mat-list-item><code>.mat-display-3</code></mat-list-item>
            <mat-list-item><code>.mat-display-2</code></mat-list-item>
            <mat-list-item><code>.mat-display-1</code></mat-list-item>

            <mat-list-item><code>.mat-h1</code>, <code>.mat-headline</code>
            </mat-list-item>
            <mat-list-item><code>.mat-h2</code>, <code>.mat-title</code></mat-list-item>
            <mat-list-item><code>.mat-h3</code>, <code>.mat-subheading-2</code>
            </mat-list-item>
            <mat-list-item><code>.mat-h4</code>, <code>.mat-subheading-1</code>
            </mat-list-item>

            <mat-list-item><code>.mat-body</code>, <code>.mat-body-1</code>
            </mat-list-item>
            <mat-list-item><code>.mat-body-strong</code>, <code>.mat-body-2</code>
            </mat-list-item>
            <mat-list-item><code>.mat-small</code>, <code>.mat-caption</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Elevation</h3>
            <ng-container *ngFor="let i of [0,1,2,3]">
              <mat-list-item *ngFor="let j of [1,2,3,4,5,6]">
                <code>.mat-elevation-z{{j+6*i}}</code>
              </mat-list-item>
            </ng-container>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Colors">
      <div fxLayout="row wrap">
        <div fxFlex="50" fxFlex.lt-sm="100">
          <mat-list>
            <h3 matSubheader>Background Color</h3>
            <mat-list-item *ngFor="let i of colorArr">
              <code>.bg-{{i}}-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]</code>
            </mat-list-item>
            <mat-list-item><code>.bg-white</code></mat-list-item>
            <mat-list-item><code>.bg-black</code></mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="50" fxFlex.lt-sm="100">
          <mat-list>
            <h3 matSubheader>Text Color</h3>
            <mat-list-item *ngFor="let i of colorArr">
              <code>.text-{{i}}-[50|100|200|300|400|500|600|700|800|900|A100|A200|A400|A700]</code>
            </mat-list-item>
            <mat-list-item><code>.text-white</code></mat-list-item>
            <mat-list-item><code>.text-black</code></mat-list-item>
            <mat-list-item><code>.text-light</code></mat-list-item>
            <mat-list-item><code>.text-dark</code></mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Spacings">
      <div fxLayout="row wrap">
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Margin</h3>
            <mat-list-item *ngFor="let i of [0,4,8,16,24,32,48,'auto']">
              <code>.m[-[t|b|r|l|x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Negative Margin</h3>
            <mat-list-item *ngFor="let i of [4,8,16,24,32,48]">
              <code>.m[-[t|b|r|l|x|y]]--{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Padding</h3>
            <mat-list-item *ngFor="let i of [0,4,8,16,24,32,48]">
              <code>.p[-[t|b|r|l|x|y]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Fonts">
      <div fxLayout="row wrap">
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Font Weight</h3>
            <mat-list-item *ngFor="let i of [1,2,3,4,5,6,7,8,9]">
              <code>.f-w-{{i*100}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Font Size</h3>
            <mat-list-item *ngFor="let i of [0,10,12,14,16,18,20]">
              <code>.f-s-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Border">
      <div fxLayout="row wrap">
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Border Width</h3>
            <mat-list-item *ngFor="let i of [0,1,2,3,4,5]">
              <code>.b[-[t|b|r|l]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Border Radius</h3>
            <mat-list-item *ngFor="let i of [0,4,8,16,24,32,'full']">
              <code>.r[-[t|b]-[|r|l]]-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Size">
      <div fxLayout="row wrap">
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Width</h3>
            <mat-list-item *ngFor="let i of [20,25,40,50,60,75,80,'full','auto']">
              <code>.w-{{i}}</code></mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Height</h3>
            <mat-list-item *ngFor="let i of [20,25,40,50,60,75,80,'full','auto']">
              <code>.h-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Typography">
      <div fxLayout="row wrap">
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Text Transform</h3>
            <mat-list-item *ngFor="let i of ['capitalize','uppercase','lowercase']">
              <code>.text-{{i}}</code></mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Text Align</h3>
            <mat-list-item *ngFor="let i of ['center','right','left']">
              <code>.text-{{i}}</code></mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>White Space</h3>
            <mat-list-item *ngFor="let i of ['normal','nowrap']">
              <code>.text-{{i}}</code></mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Vertical Align</h3>
            <mat-list-item *ngFor="let i of ['top','middle','bottom']">
              <code>.align-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Ellipsis</h3>
            <mat-list-item><code>.text-ellipsis</code>, <code>.text-truncate</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

    <mat-tab label="Image & Icon">
      <div fxLayout="row wrap">
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Object Fit</h3>
            <mat-list-item *ngFor="let i of ['cover','contain']"><code>.fit-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
        <div fxFlex="25" fxFlex.lt-sm="50">
          <mat-list>
            <h3 matSubheader>Icon Size</h3>
            <mat-list-item *ngFor="let i of [18,24,36,48]"><code>.icon-{{i}}</code>
            </mat-list-item>
          </mat-list>
        </div>
      </div>
    </mat-tab>

  </mat-tab-group>
</mat-card>